<template>
  <view class="bigbox">
    <view class="textsy" @click="login()">
      个人中心
    </view>
    <view class="headbox">
      <view class="yybox">
        <view class="headone">

        </view>
        <view style="margin-left: 20rpx;">
          <view>个人会员：xxxx</view>
          <view class="type">白银会员 </view>

        </view>
        <view style="margin-left: 25%;">
          <u-icon name="setting-fill" size="30px" @click="topinformation()"></u-icon>
        </view>
      </view>


      <view class="istext" @click="gothree()">
        <text>1 动态</text>
        <text>2 关注</text>
        <text>3 粉丝</text>
      </view>


    </view>
    <!-- 内部员工 -->
    <view class="headbox">
      <view class="yybox">
        <view class="headone">

        </view>
        <view style="margin-left: 20rpx;">
          <view>xxx分会：xxxx</view>


        </view>
        <view style="margin-left: 25%;">
          <u-icon name="setting-fill" size="30px"></u-icon>
        </view>

       
      </view>
      <view class="" style="width: 80%; display: flex;justify-content: space-evenly;align-items: center;padding-left: 36px;">
   
          <u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress>
     
        <view class="">
             积分
        </view>
      </view>


    </view>
    <!-- 软件区 -->
    <view class="badybox">
      <view class="bigboxs" v-for="(item,index) in badyboxList" @click="isgogo(item.urlgo)">
        <view class="badyimg" :class="item.color=='red'?'bigboxhuiyuan':''">

        </view>
        <view class="badytext">
          {{item.text}}
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        badyboxList: [{
            iamge: '',
            text: '会员列表',
            urlgo: '/pages/home/memberlist',
            color: 'red'
          },
          {
            iamge: '',
            text: '分会列表',
            urlgo: '/pages/home/branch',
          },
          {
            iamge: '',
            text: '入会审核',
             urlgo: '/pages/home/toexamine',
            color: 'red'
          },
          {
            iamge: '',
            text: '会员证书',
            urlgo: '/pages/home/certificate',
          },
          {
            iamge: '',
            text: '会费缴纳',
            urlgo: '/pages/home/moneypay',
          },
          {
            iamge: '',
            text: '活动缴费',
            urlgo: '/pages/home/activitypage',
          },
          {
            iamge: '',
            text: '3333',
            urlgo: '',
          },
          {
            iamge: '',
            text: '3333',
            urlgo: '',
          },



        ],
      }
    },
    onLoad() {

    },
    methods: {
      topinformation(){
        uni.navigateTo({
          url: '/pages/home/personmsg'
        })
      },
      login() {
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }, 
      gothree() {
        uni.navigateTo({
          url: '/pages/fans/index'
        })
      },
      isgogo(url) {
        uni.navigateTo({
          url: url
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bigbox {
    width: 100%;
    height: 88vh;
    background: #F5F5F5;
    display: flex;
    // justify-content: center;	
    flex-direction: column;
    align-items: center;

    .textsy {
      color: black;
      font-weight: 600;
      margin-top: 40rpx;
    }

    .headbox {
      margin-top: 40rpx;
      width: 700rpx;
      height: 300rpx;
      background-color: #ffffff;
      border-radius: 20rpx;

      // display: flex;
      .yybox {
        width: 700rpx;
        height: 220rpx;
        text-align: center;
        line-height: 50rpx;
        // background-color: rosybrown;
        border-radius: 20rpx;
        display: flex;
        align-items: center;

        // line-height:100rpx;
        .headone {
          margin-left: 30rpx;
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
          background-color: red;

        }

      }

      .type {
        width: 200rpx;
        height: 50rpx;
        background-color: black;
        color: salmon;
        font-weight: 500;
        border-radius: 30rpx;
        text-align: center;
        line-height: 50rpx;
        margin-top: 20rpx;
      }


      .istext {
        display: flex;
        justify-content: space-between;
        padding: 0 60rpx;
        margin-top: 15rpx;
      }

    }

    .badybox {
      margin-top: 40rpx;
      width: 620rpx;
      height: auto;
      background-color: #ffffff;
      border-radius: 20rpx;
      display: flex;
      flex-wrap: wrap;
      padding: 40rpx;

      .bigboxs {
        width: 160rpx;
        height: 160rpx;
        // background-color: aqua;
        margin-left: 32rpx;
        // margin-bottom: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .bigboxhuiyuan {
          background-color: red;
        }


        .badytext {
          font-size: 24rpx;
        }


      }

      .badyimg {
        width: 70rpx;
        height: 70rpx;
        background-color: rosybrown;
        border-radius: 10rpx;
      }
    }

  }
</style>